<template>
  <el-container class="whole-app">
    <el-header><head-line></head-line></el-header>
    <el-container>
      <el-aside
        :class="{
          'el-aside-closed': $store.state.collapse,
          'el-aside-opened': !$store.state.collapse,
        }"
      >
        <nav-system></nav-system>
      </el-aside>
      <el-main>
        <el-row>
          <el-button @click="switchNav"
            ><i class="el-icon-s-data"></i></el-button
        ></el-row>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import NavSystem from "@/components/NavSystem";
import HeadLine from "@/components/HeadLine";
export default {
  components: { HeadLine, NavSystem },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
    };
  },
  methods: {
    switchNav() {
      // this.collapse = !this.collapse;
      this.$store.commit("switchCollapse");
    },
  },
};
</script>

<style lang="scss">
@import "~@/styles.module";
.whole-app {
  min-height: 100vh;
}
.el-header {
  background-color: $--color-tenth;
}
.el-aside {
  background-color: $--color-tenth;
}
.el-main {
  background-color: beige;
}
.el-aside-closed {
  width: 64px !important;
  transition-property: width;
  transition-duration: 0.5s;
}
.el-aside-opened {
  width: 300px !important;
  transition-property: width;
  transition-duration: 0.5s;
}
</style>
